<template>
  <div class="tabbar">
      <div class="tabbarin banxin">
        <div class="tab-l">欢迎来到叩丁狼积分商城</div>
        <div class="tab-r">
          <ul>
            <li><img :src="userInfo.headImg" width="24px" alt=""> 用户名：{{userInfo.nickName}}</li>
            <li>我的积分：{{userInfo.coin}}</li>
            <li>获取积分</li>
            <li>叩丁狼官网</li>
            <li class="cart" v-if="isLogined"><img src="../assets/img/cart.png" alt=""> 购物车 <div class="yuan">{{cartTotal}}</div></li>
            <li class="btnlogin" @click="changeIsShowLoginModal(true)" v-else>登录</li>
          </ul>
        </div>
      </div>
  </div>
</template>

<script>
import { mapState,mapMutations,mapActions} from "vuex"
import { WeiXinLoginAPI } from "../request/api"
export default {
  async created(){
    console.log("topbar-created..",this.$route.query.code);
    let mycode = this.$route.query.code
    if(mycode){
      let res = await WeiXinLoginAPI({
        code:mycode
      })
      if(res.code == 0){
        alert("扫码登录成功")
        localStorage.setItem("x-auth-token",res["x-auth-token"])
        this.$router.push(this.$route.path)
        this.changeIsLogined(true)
        this.asyncChangeUserInfo()
      }else if(res.code == 400){
        alert("请重新扫码")
        this.changeIsShowLoginModal(true)
      }else if(res.code == 407){
        alert("请使用手机号在登录一下")
        this.changeIsShowLoginModal(true)
        localStorage.setItem("uuid",res.uuid)
      }
      // console.log("扫码结果：",res);
    }else{
      console.log("没有保存就进来了");
      let mytoken = localStorage.getItem("x-auth-token")
      this.changeIsLogined(Boolean(mytoken))
      if(mytoken){
        this.asyncChangeUserInfo()
      }else{
        console.log("初始化");
        this.initUserInfo()
      }
    }
  },
  watch:{
    //  "$route.path":{
    //   handler(newVal,oldVal){
    //     console.log("地址变化了",newVal,oldVal);
    //     let mytoken = localStorage.getItem("x-auth-token")
    //     this.changeIsLogined(Boolean(mytoken))
    //   }
    // }
  },
  computed:{
    ...mapState({
      isLogined: state => state.loginStatus.isLogined,
      cartTotal: state => state.userInfo.cartTotal,
      userInfo: state => state.userInfo.userInfo
    })
  },
  methods:{
    ...mapMutations({
      changeIsShowLoginModal:"showModal/changeIsShowLoginModal",
      changeIsLogined:"loginStatus/changeIsLogined",
      changeUserInfo:"userInfo/changeUserInfo",
      initUserInfo:"userInfo/initUserInfo",
    }),
    ...mapActions({
      asyncChangeUserInfo:"userInfo/asyncChangeUserInfo"
    })
  }
}
</script>

<style lang="less">
.tabbar{
  background-color: #242B39 ;
  height: 40px;
  .tabbarin{
    line-height: 40px;
    color: #FFFEFE;
    .tab-l{
      float: left;
      font-size: 14px;
    }
    .tab-r{
      float: right;
      ul{
        // width: 354px;
        li{
          float: left;
          font-size: 14px;
          margin: 0 10px
        }
        .btnlogin{
          padding: 0 15px;
            background: #0A328E;
          }
        .yuan{
          width: 22px;
          height: 22px;
          display: inline-block;
          // border: 1px solid red;
          background-color: #FD604D;
          border-radius: 11px;
          line-height: 22px;
          text-align: center;
        }
      }
    }
  }
}
</style>